<%--
  Created by IntelliJ IDEA.
  User: 14811
  Date: 2022-4-15
  Time: 14:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<% String path = request.getContextPath(); %>
<html>
<head>
    <style>
        .file-preview{
            height: 560px;
            width: 450px;
        }
        .file-drop-zone{
            height: 520px;

        }
        .file-caption-main {
            width: 450px;
        }
        .file-thumbnail-footer{
            margin-bottom: 0;
        }
        .krajee-default.file-preview-frame {
            position: relative;
            display: table;
            margin: 8px;
            border: 1px solid #ddd;
            box-shadow: 1px 1px 5px 0 #a2958a;
            padding: 6px;
            float: left;
            text-align: center;
            width: 130px;
            height: 130px;
        }
        .krajee-default.file-preview-frame .kv-file-content {
            height: 130px;
        }

    </style>
    <script>
        $(function(){
            //页面加载ckeditor富文本编辑器
            CKEDITOR.replace("routeintroduce");
            //fileinput
            $('#rimage').fileinput({
                language: 'zh',
                uploadUrl: "<%=path%>/file/upLoadFileInput",
                browseClass: 'btn btn-primary',
                maxFileCount: 4,//最多支持上传的个数
                enctype: 'multipart/form-data',
                maxFileSize: 1024, //单位为kb, 如果为0表示不限制文件大小
                allowedFileExtensions: ['jpg', 'gif', 'png'],
                initialPreviewAsData: true, // 是否初始化预览图片
                initialPreviewFileType: 'image', //回显文件的类型(初始化预览图片类型)
                //img/product/small/eacd6271-174b-4a02-90ca-6de3b2027fea.jpg
                initialPreview: "<%=path%>/file/download?filename=${tabRoute.rimage}",
                previewSettings: {
                    image: {width: "100px", height: "100px"},
                }
            });

            $("#rimage").on("fileuploaded", function(event, data, previewId, index){
                /* alert(index)
                 alert(previewId)
                 console.log(data)
                 alert(data.response.filePath+data.response.imgUrl)*/
                if(index===0){
                    $("#eimg").val(data.response.filePath+data.response.imgUrl);
                }else {
                    var str = "#eimg"+index;
                    $(str).val(data.response.filePath+data.response.imgUrl);
                }
            })
        })

    </script>
    <title>Title</title>
</head>
<body>
<form class="form-horizontal" role="form" id="updateRoute">
    <input type="text" name="bigPic" id="eimg1">
    <input type="text" name="bigPic" id="eimg2">
    <input type="text" name="bigPic" id="eimg3">
    <input type="hidden" value="${tabRoute.rid}" name="rid">
    <div class="form-group">
        <label for="rname" class="col-sm-2 control-label">路线名称</label>
        <div class="col-sm-4">
            <input type="text" value="${tabRoute.rname}" class="form-control" id="rname" name="rname" placeholder="请输入用户名称">
        </div>
    </div>
    <div class="form-group">
        <label for="price" class="col-sm-2 control-label">价格</label>
        <div class="col-sm-4">

            <input type="text" value="${tabRoute.price}" class="form-control" id="price" name="price" placeholder="请输入用户名称">
        </div>
    </div>
    <div class="form-group">
        <label for="routeintroduce" class="col-sm-2 control-label">路线介绍</label>
        <div class="col-sm-8">
            <textarea name="routeintroduce" id="routeintroduce">${tabRoute.routeintroduce}</textarea>
<%--            <input type="text" value="${tabRoute.routeintroduce}" class="form-control" id="routeintroduce" name="routeintroduce" placeholder="请输入用户名称">--%>
        </div>
    </div>
    <div class="form-group">
        <label for="rdate" class="col-sm-2 control-label">日期</label>
        <div class="col-sm-4">
            <input type="text" class="form-control" value="${tabRoute.rdate}" id="rdate" name="rdate" placeholder="请输入用户名称">
        </div>
    </div>
    <div class="form-group">
        <label for="isthemetour" class="col-sm-2 control-label">主题路线描述:</label>
        <div class="col-sm-4">
            <input type="text" class="form-control" value="${tabRoute.isthemetour}" id="isthemetour" name="isthemetour" placeholder="请输入用户名称">
        </div>
    </div>
    <div class="form-group">
        <label for="count" class="col-sm-2 control-label">收藏量</label>
        <div class="col-sm-4">
            <input type="text" class="form-control" id="count" value="${tabRoute.count}"   name="count" placeholder="请输入用户名称">
        </div>
    </div>
    <div class="form-group">
        <label for="rimage" class="col-sm-2 control-label">路线图片</label>
        <div class="col-sm-4">
            <img src="${pageContext.request.contextPath}/file/download?filename=${tabRoute.rimage}" height="30px" width="30px"/>
        </div>
    </div>

    <div class="form-group">
        <label for="rimage" class="col-sm-2 control-label">路线图片上传</label>
        <div class="col-sm-4">
            <input type="file" multiple class="form-control" name="myFile" id="rimage">
            <input type="hidden" name="rimage" id="eimg">
        </div>
    </div>
    <div class="form-group">
        <label  class="col-sm-2 control-label">商家</label>
        <div class="col-sm-4">
            <div class="col-sm-4">
                <select name="sid">
                    <c:forEach items="${sellers}" var="s">
                        <option value="${s.sid}">${s.sname}</option>
                    </c:forEach>
                </select>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label for="sourceid" class="col-sm-2 control-label">资源ID</label>
        <div class="col-sm-4">
            <input type="text" class="form-control" value="${tabRoute.sourceid}" id="sourceid" name="sourceid" placeholder="请输入用户名称">
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label">路线类型</label>
        <div class="col-sm-4">
            <select name="cid">
                <c:forEach items="${categories}" var="c">
                    <option value="${c.cid}">${c.cname}</option>
                </c:forEach>
            </select>
        </div>
    </div>
</form>
</body>
</html>

